﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Demo_Flexigrid_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test Demo For Flexgrid</title>
    <script src="flexgrid/jquery.js" type="text/javascript"></script>
    <%--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>--%>
    <script src="flexgrid/flexigrid.js" type="text/javascript"></script>
    <link href="flexgrid/css/flexigrid.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">

        function test(com, grid) {
            if (com == 'Delete') {
                confirm('Delete ' + $('.trSelected', grid).length + ' items?')
            }
            else if (com == 'Add') {
                alert('Add New Item');
            }
        }

        $(function () {

            $("#flex1").flexigrid
			(
			{
			    url: 'postback.ashx',
			    dataType: 'json',
			    colModel: [
				{ display: 'ISO', name: 'iso', width: 40, sortable: true, align: 'center' },
				{ display: 'Name', name: 'name', width: 180, sortable: true, align: 'left' },
				{ display: 'Printable Name', name: 'printable_name', width: 120, sortable: true, align: 'left' },
				{ display: 'ISO3', name: 'iso3', width: 130, sortable: true, align: 'left', hide: true },
				{ display: 'Number Code', name: 'numcode', width: 80, sortable: true, align: 'right' }
				],
			    buttons: [
				{ name: 'Add', bclass: 'add', onpress: test },
				{ name: 'Delete', bclass: 'delete', onpress: test },
				{ separator: true }
				],
			    searchitems: [
				{ display: 'ISO', name: 'iso' },
				{ display: 'Name', name: 'name', isdefault: true }
				],
			    sortname: "iso",
			    sortorder: "asc",
			    usepager: true,
			    title: 'Countries',
			    useRp: true,
			    rp: 15,
			    showTableToggleBtn: true,
			    width: 700,
			    height: 200
			}
			);
        });
    
    </script>
    <style>
        .flexigrid div.fbutton .add { background: url(flexgrid/css/images/add.png) no-repeat center left; }
        .flexigrid div.fbutton .delete { background: url(flexgrid/css/images/close.png) no-repeat center left; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="flex1">
    </div>
    <div id="flex2">
    </div>
    </form>
</body>
</html>
